<script lang="ts" setup name="XtxCity">
import { ref, watch } from 'vue';
import { onClickOutside } from '@vueuse/core'
import axios from 'axios'

defineProps<{
  modelValue?: string
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', val: string): void
}>()

const active = ref(false)
const toggle = () => {
  active.value = !active.value
}
const target = ref(null)

// 当组件外面被点击时执行
onClickOutside(target, () => {
  // console.log('option 外面被点了')
  // toggle()
  active.value = false
})

type CityItem = {
  code: string
  level: number
  name: string
  areaList: CityItem[]
}

// 用于渲染 (可能会修改)
const cityList = ref<CityItem[]>([])
// 用于缓存 (永远不修改)
const cacheList = ref<CityItem[]>([])

async function getCityList() {
  const res = await axios.get<CityItem[]>('https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json')
  console.log(res)
  cityList.value = res.data
  cacheList.value = res.data
}

getCityList()

// 选择城市
const result = ref({
  provinceCode: '',
  provinceName: '',
  cityCode: '',
  cityName: '',
  countyCode: '',
  countyName: ''
})
// 交互逻辑分析
// 1. 当用户点击条目时, 获取到当前下面所有的列表 (数组)
// 2. 判断当前点击的是省 / 市 / 区
//    省 --> level 0 --> 渲染所有的市, 记录当前点击的省
//    市 --> level 1 --> 渲染所有的区, 记录当前点击的市
//    区 --> level 2 --> 关闭弹层, 记录当前点击的区, 重置状态, 将省市区传递给父组件
const changeSelect = (city: CityItem) => {
  // console.log(city)
  cityList.value = city.areaList

  if (city.level === 0) {
    // 省
    result.value.provinceName = city.name
    result.value.provinceCode = city.code
  } else if (city.level === 1) {
    // 市
    result.value.cityName = city.name
    result.value.cityCode = city.code
  } else {
    // 区
    result.value.countyName = city.name
    result.value.countyCode = city.code
    // 关闭弹层
    active.value = false
    // 传递给父组件
    emit('update:modelValue', `${result.value.provinceName} ${result.value.cityName} ${result.value.countyName}`)
  }
}

// 重置状态
watch(active, () => {
  // 取出缓存的数据, 重新覆盖渲染
  cityList.value = cacheList.value
})

</script>
<template>
  <div ref="target" class="xtx-city">
    <div class="select" @click="toggle">
      <span class="placeholder" v-if="modelValue">{{ modelValue }}</span>
      <span class="placeholder" v-else>请选择配送地址</span>
      <span class="value"></span>
      <i class="iconfont icon-angle-down"></i>
    </div>
    <div class="option" v-show="active">
      <span @click="changeSelect(item)" class="ellipsis" v-for="item in cityList" :key="item.code">{{ item.name }}</span>
    </div>
  </div>
</template>

<style scoped lang="less">
.xtx-city {
  display: inline-block;
  position: relative;
  z-index: 400;
  .select {
    border: 1px solid #e4e4e4;
    height: 30px;
    padding: 0 5px;
    line-height: 28px;
    cursor: pointer;
    &.active {
      background: #fff;
    }
    .placeholder {
      color: #999;
    }
    .value {
      color: #666;
      font-size: 12px;
    }
    i {
      font-size: 12px;
      margin-left: 5px;
    }
  }
  .option {
    width: 542px;
    border: 1px solid #e4e4e4;
    position: absolute;
    left: 0;
    top: 29px;
    background: #fff;
    min-height: 30px;
    line-height: 30px;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    > span {
      width: 130px;
      text-align: center;
      cursor: pointer;
      border-radius: 4px;
      padding: 0 3px;
      &:hover {
        background: #f5f5f5;
      }
    }
  }
}
</style>